import "./App.css";
import React, { useState } from "react";
import Item from "./Components/Item"
import Card from "./Components/UI/Card/index"
import { ItemForm } from "./Components/ItemForm/index"
export default   function App() {
  const [data, setData] = useState([
    {id:0,date:new Date(2024,10,26,18,5),title: "三月", desc: 23, top: "学习React", bottom: "40mins" },
    {id:99,date:new Date(2024,11,27,19,5),title: "四月", desc: 24, top: "学习React", bottom: "50mins" },
    {id:1,date:new Date(2024,12,28,23,8),title: "五月", desc: 25, top: "学习React", bottom: "40mins" },
    {id:2,date:new Date(2025,1,29,5,59),title: "六月", desc: 26, top: "学习React", bottom: "50mins" },
    {id:3,date:new Date(2025,2,30,12,5),title: "七月", desc: 27, top: "学习React", bottom: "90mins" },
    {id:4,date:new Date(2025,3,1,13,5),title: "八月", desc: 28, top: "学习React", bottom: "50mins" },
  ])
  const onAddItem = item => {
    setData(pV=>[{...item, id:Date.now().toString()},...pV, ])
  }
  const onDelete = id => {
    setData(pV=>pV.filter(m=>m.id!==id))
  }
  const [newData,setNewData] = useState(data.filter(m=>m.date.getFullYear()===2024))
  const onYearChange = year => {
    setNewData(data.filter(m=>m.date.getFullYear()===+year))
  }
  return (
    <div className="app">
      <ItemForm onAddItem={onAddItem} />
      <Card className="content" >{newData.length?<Item data={newData} onDelete={onDelete} onYearChange={onYearChange}/>:<h3>空</h3>}
      </Card>
    </div>
  );
}

// state

// export default function App() {
//   /*setState 
//     触发组件的重新渲染，它时异步的
//         所以当多次调用setState时，会合并成一次执行
//         有可能会出现计算错误例如 点击速度足够快 setState执行时会取同一个旧值从而导致点击两次累加和相同
//         为了避免此种情况，可以通过为setState传递回调函数的形式来修改state
//         setCount((preVal)=>return preVal+xxx)
//   */
//   const [Count, setCount] = useState({ name: "张三", age: 18, sex: "男" });
//   const handleMinus = () => {
//     handleChange(-1);
//   };
//   const handleAdd = () => {
//     handleChange(+1);
//   };
//   const handleChange = (v) => {
//     // 异步执行 加入队列 渲染只执行一次
//     // setCount(newCount);
//     setCount(preVal=> ({...preVal, age: Count.age + v}) );
//   };
//   return (
//     <div>
//       <p>
//         {Count.name}--{Count.sex}--{Count.age}
//       </p>
//       <button onClick={handleMinus}>-</button>----
//       <button onClick={handleAdd}>+</button>
//     </div>
//   );
// }


// ref

// export default function App() {
//     /*
//         ref 可以获取DOM元素
//         创建一个存储DOM元素的容器
//          使用userRef()钩子函数
//             注意：React中的钩子函数只能用于函数组件和自定义钩子函数中
//                  钩子函数只能在函数组件中使用
//        uerRef()
//         返回的是一个普通的对象
//         {current:undefined}
//         通过ref.current可以访问DOM元素
//         所以直接创建一个js对象（带有current属性的），也可以替代userRef()
//         const refH1 = {current:null}
//         区别：
//         自己创建的，组件每次重新渲染都会创建一个新的对象
//         使用userRef()，组件每次重新渲染时，ref对象都不会变
//     */
// //   const refH1 = useRef(null)
//   const refH1 = {current:null}
//     const handleChange = ()=>{
//         refH1.current.style.color = 'red'
//     }
//   return (
//     <div>
//         <h1 ref={refH1}>xxxxx</h1>
//         <button onClick={handleChange}>改变</button>
//     </div>
//   )
// }
